<template>
	<pager ref="pager" @loadData="loadData" auth bottombar background-color="#ffffff">

		<view class="safe-bottom flex flex-col w100">
			<view class="box1 flex flex-col w100">
				<view class="title">常见问题</view>
				<view class="qlist flex flex-col w100">
					<view class="qitem flex flex-col w100">
						<view class="txt1 txt-breakall">Q1 充电接触问题？</view>
						<view class="txt2 txt-breakall">正确插拔电源适配器，再使用<text
								style="color: #FF9D00;">【智能故障检测】</text>功能查看检测设备问题项。</view>
					</view>
					<view class="qitem flex flex-col w100">
						<view class="txt1 txt-breakall">Q2 刹车不灵？</view>
						<view class="txt2 txt-breakall">可将设备送至售后门店维修点进行检测。</view>
					</view>
				</view>
			</view>
		</view>

		<template v-slot:bottombar>
			<view class="bottombar solid-top">
				<view class="bottombar-content flex flex-col w100">
					<view hover-class="click-view" class="contact-btn flex flex-row align-c justify-c">
						<view class="txt1">智能客服</view>
						<clientservice></clientservice>
					</view>
					<view @click="goFeedback" hover-class="click-view"
						class="feedback-btn flex flex-row align-c justify-c">反馈问题</view>
					<view @click="callPhone" hover-class="click-view" class="phone-btn flex flex-row align-c justify-c">
						客服电话：400-060-1260
					</view>
				</view>
			</view>
		</template>
	</pager>
</template>
<script>
	export default {
		data() {
			return {};
		},
		onLoad() {
			const vm = this;
			uni.setNavigationBarTitle({
				title: 'HBLD2超轻款'
			})
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			callPhone() {
				const vm = this;
				uni.makePhoneCall({
					phoneNumber: '4000601260'
				})
			},
			goFeedback() {
				const vm = this;
				vm.$utils.openPage('/pkgFeedback/pages/index/index');
			},
		}
	};
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.bottombar {
		background-color: #ffffff;

		.bottombar-content {
			padding: 30rpx;

			.contact-btn {
				position: relative;
				height: 94rpx;
				border-radius: 48rpx;
				border: 1px solid #DCDCDC;
				background-color: #ffffff;
				font-size: 32rpx;
				font-weight: bold;
				color: #353535;
				margin-bottom: 36rpx;

				.txt1 {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
				}
			}

			.feedback-btn {
				margin-bottom: 36rpx;
				height: 94rpx;
				border-radius: 48rpx;
				background: linear-gradient(180deg, #427DF7 0%, #0B51E4 100%);
				font-size: 32rpx;
				font-weight: bold;
				color: #ffffff;
			}

			.phone-btn {
				padding: 20rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #353535;
			}

		}
	}

	.box1 {
		padding: 30rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.qlist {
			.qitem {
				margin-bottom: 20rpx;

				.txt1 {
					font-size: 26rpx;
					font-weight: bold;
					color: #353535;
					line-height: 36rpx;
				}

				.txt2 {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #353535;
					line-height: 36rpx;
				}
			}
		}

	}
</style>